<template>
    <div v-if="pathShow" class="rootMain">
        <div class="title flex-align">
            我的小竹叶:
            <span
                v-if="userInfo && (userInfo.money || userInfo.money == 0)"
                class="fz30 cff4 mr20 ml10"
                >{{ userInfo.money }}</span
            >
            <el-popover
                placement="bottom"
                width="400"
                trigger="click"
                @show="getMoneyLog"
            >
                <div class="detailBox">
                    <div class="title fz20">小竹叶明细</div>
                    <div class="tabs">
                        <div
                            v-for="(item, index) in tabs"
                            :key="index"
                            class="tab"
                            :class="{ 'tab-active': index == tabsIndex }"
                            @click="detailClick(index)"
                        >
                            {{ item.name }}
                            <div class="line"></div>
                        </div>
                    </div>
                    <div
                        class="detailItem flex-between"
                        v-for="(item, index) in detailList"
                        :key="index"
                    >
                        <div class="left">
                            <div style="font-weight: bold" class="fz16 c333">
                                {{ item.memo }}
                            </div>
                            <div class="fz12 c999">{{ item.createtime }}</div>
                        </div>
                        <div
                            style="font-weight: bold"
                            :class="[
                                {
                                    color1: item.money_status == 1,
                                    color2: item.money_status == 2,
                                    color3: item.money_status == 3,
                                },
                            ]"
                            class="fz18"
                        >
                            {{ item.money }}
                        </div>
                    </div>
                </div>
                <div slot="reference" class="detail pointer">明细</div>
            </el-popover>
        </div>
        <div class="showTips">
            <div class="leafNum">
                <div class="leafNum-label">充值小竹叶:</div>
                <div class="lf_num flex-center-align">
                    <span> ￥ </span>
                    <el-input
                        v-model="amount"
                        class="num-input"
                        :focus="numFocus"
                        type="number"
                        placeholder="手动输入充值金额"
                        @focus="focus"
                    />
                    <div class="moeny" v-show="amount > 0">
                        {{ amount * 100 }}小竹叶
                    </div>
                </div>
            </div>
            <div class="chongzhi-list">
                <div
                    v-for="(item, index) in comboList"
                    :key="index"
                    class="chongzhi-item"
                    :class="{ 'chongzhi-item-active': index == comboListIndex }"
                    @click="selectCombo(index)"
                >
                    <div class="jiazeng">加赠{{ item.extra }}</div>
                    <div class="chongzhi-moeny">{{ item.name }}</div>
                    <div class="chongzhi-xzy">
                        {{ item.amount * 100 }}小竹叶
                    </div>
                </div>
            </div>
            <div class="flex">
                <div
                    class="payment flex-center-align pointer"
                    :class="{
                        paymentCurrent: select_pay_type == item.pay_type,
                    }"
                    v-for="(item, index) in paymentList"
                    :key="index"
                    @click="select_pay_type = item.pay_type"
                >
                    <img
                        src="~/assets/images/service/pay_check1.png"
                        class="selectIcon"
                        v-if="select_pay_type == item.pay_type"
                    />
                    <img
                        src="~/assets/images/service/pay_check0.png"
                        class="selectIcon"
                        v-if="select_pay_type != item.pay_type"
                    />
                    <img :src="item.icon" class="icon" alt="" />

                    <span>{{ item.name }}</span>
                </div>
            </div>
            <div class="mt30">
                <el-checkbox v-model="agree" true-label="1" false-label="0">
                    <span class="agree">
                        我已同意
                        <span @click.stop="goxieyi()" class="c1C8 fz14"
                            >《支付协议》</span
                        >
                    </span>
                </el-checkbox>
            </div>

            <span
                class="btn"
                :class="{
                    'btn-disabled': amount === null && comboListIndex === null,
                }"
                @click="submit"
                >立即支付</span
            >
        </div>

        <div v-html="payHtml"></div>
        <!-- 微信支付弹窗 -->
        <div class="wxPay">
            <el-dialog :visible.sync="wxPayShow" width="370px">
                <div class="ErwmToast">
                    <div class="fz22">
                        应付金额：<span class="cff4">{{
                            comboListIndex === null
                                ? amount
                                : comboList[comboListIndex].amount
                        }}</span>
                        元
                    </div>
                    <div class="erwm">
                        <iframe
                            class="iframe mt20"
                            :src="iframeSrc"
                            naem="newPage"
                        />
                    </div>
                    <div class="flex-center-align mt20">
                        <img
                            src="~/assets/images/service/icon_pay1.png"
                            class="icon"
                            alt=""
                        />
                        <div class="fz22 c333">微信支付</div>
                    </div>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import {
    getMoneyLog,
    goPay,
    payDetail,
    getComboList,
} from "@/assets/api/userCenterApi.js";
import { mapState, mapActions } from "vuex";

export default {
    name: "mySet",
    props: ["lists"],
    data() {
        return {
            detailList: [],
            wxPayShow: false,
            select_pay_type: 1, //选择支付宝还是微信支付
            paymentList: [
                {
                    name: "支付宝",
                    pay_type: 1,
                    icon: require("~/assets/images/service/pay_zfb.png"),
                },
                {
                    name: "微信",
                    pay_type: 2,
                    icon: require("~/assets/images/service/pay_wx.png"),
                },
            ],
            numList: [],
            numCurrent: 0,
            numFocus: false,

            agree: "", //小竹协议
            amount: null, //充值金额
            orderNo: "", //订单号

            payHtml: "", //支付宝支付
            iframeSrc: "", //微信二维码地址

            tabs: [
                {
                    name: "全部",
                    status: "0",
                },
                {
                    name: "获取",
                    status: "1",
                },
                {
                    name: "兑换",
                    status: "2",
                },
                {
                    name: "失效",
                    status: "3",
                },
            ],
            tabsIndex: 0,

            pathShow: false,

            comboList: [],
            comboListIndex: null,
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    mounted() {
        this.getMoneyLog();
        this.getComboList();
        this.getUserInfo();
        // this.payDetail();
    },
    methods: {
        ...mapActions("common", ["getUserInfo"]),

        handleSelect(index) {
            this.activeIndex = index;
        },
        async getMoneyLog() {
            let res = await getMoneyLog({
                status: this.tabs[this.tabsIndex].status,
            });
            this.pathShow = true;
            if (res.code == 1) {
                this.detailList = res.data;
            }
        },

        async getComboList() {
            const res = await getComboList({});
            if (res.code == 1) {
                this.comboList = res.data;
            }
        },

        // 选择购买套餐
        selectCombo(index) {
            this.amount = null;
            this.comboListIndex = index;
        },

        // 输入框选中
        focus() {
            this.comboListIndex = null;
        },

        changeNum(index) {
            this.numCurrent = index;
        },

        goxieyi() {
            window.open("https://api.xiaozhucaishui.com/xieyi/pay.html");
        },
        submit() {
            if (this.amount == null && this.comboListIndex === null) return;
            if (this.agree == "") {
                this.$message({
                    message: "请勾选小竹财税合同协议",
                    type: "warning",
                });
                return;
            } else {
                this.payMoney();
            }
        },
        async payMoney() {
            var params = {
                source: "web",
                pay_type: this.select_pay_type,
            };
            if (this.amount === null) {
                params.id = this.comboList[this.comboListIndex].id;
                params.amount = this.comboList[this.comboListIndex].amount;
            }
            if (this.comboListIndex === null) {
                params.amount = this.amount;
            }
            const res = await goPay(params);
            if (res.code == 1) {
                if (this.select_pay_type == 1) {
                    this.payHtml = res.data;
                    this.$nextTick(() => {
                        document.forms[0].submit();
                    });
                } else {
                    this.wxPayShow = true;
                    this.iframeSrc = res.data;
                    this.orderNo = res.msg;
                    this.getWxPayType();
                }
            }
        },
        init() {
            this.getUserInfo();
            this.amount = "";
        },

        async getWxPayType() {
            let res = await payDetail({ order_no: this.orderNo });
            if (res.code == 1) {
                if (res.data.pay_status == 2) {
                    this.wxPayShow = false;
                    this.iframeSrc = "";
                    this.init();
                } else {
                    setTimeout(() => {
                        this.getWxPayType();
                    }, 2000);
                }
            }
        },

        detailClick(index) {
            this.tabsIndex = index;
            this.getMoneyLog();
        },
    },
};
</script>

<style lang="scss" scoped>
@import url("@/assets/static/reset.css");

.rootMain {
    position: relative;
    background-color: #fff;
    margin-left: 20px;
    min-height: 480px;

    .title {
        padding: 0 30px;
        font-size: 18px;
        height: 80px;
        border-bottom: 1px solid #ececec;

        .detail {
            text-align: center;
            width: 72px;
            height: 29px;
            line-height: 29px;
            background: #ffffff;
            border-radius: 16px;
            border: 1px solid #dbdde0;
            font-size: 14px;
        }
    }
    .showTips {
        padding: 20px 50px;

        .payment {
            margin-top: 50px;
            margin-right: 20px;
            padding: 0 30px;
            width: 210px;
            height: 68px;
            background: #ffffff;
            border-radius: 4px 4px 4px 4px;
            border: 1px solid #ececec;
            font-size: 18px;

            &.paymentCurrent {
                box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.1);
            }

            .selectIcon {
                width: 25px;
                height: 25px;
            }

            .icon {
                margin: 0 10px;
                width: 40px;
                height: 40px;
            }
        }

        .btn {
            position: absolute;
            bottom: 60px;
            right: 200px;
            display: inline-block;
            text-align: center;
            width: 140px;
            height: 42px;
            line-height: 42px;
            background: #1c87f3;
            border-radius: 4px;
            color: #fff;
            cursor: pointer;
            user-select: none;
            &:hover {
                opacity: 0.8;
            }
            &:active {
                opacity: 0.9;
            }
        }

        .btn-disabled {
            background: #a0cfff;
            cursor: not-allowed;
        }

        .leafNum {
            margin-top: 10px;
            .leafNum-label {
                font-size: 20px;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 700;
                color: #333333;
                padding-bottom: 20px;
            }
            .num-input {
                width: 309px;
            }
            .lf_num {
                line-height: 49px;
                position: relative;
                justify-content: flex-start;
                span {
                    font-size: 20px;
                    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
                    font-weight: 500;
                    color: #000000;
                    position: absolute;
                    left: 13px;
                    z-index: 1;
                }
                .moeny {
                    margin-left: 30px;
                    font-size: 18px;
                    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
                    font-weight: 400;
                    color: #ff6161;
                }
                &::v-deep .el-input__inner {
                    width: 309px;
                    height: 49px;
                    background: #f3f3f3;
                    border-radius: 4px;
                    border-color: #f3f3f3;
                    padding-left: 40px;
                }
            }
        }

        .active {
            background: #e0efff;
            border: 1px solid #1c87f3;
        }
    }

    .ErwmToast {
        text-align: center;

        .erwm {
            display: flex;
            align-items: center;
            justify-content: center;

            .iframe {
                width: 333px;
                height: 333px;
                border-width: 0;
            }
        }

        .icon {
            margin-right: 5px;
            width: 30px;
            height: 30px;
        }
    }
}
.tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 6px;
    position: sticky;
    top: 0;
    background-color: #ffffff;
    .tab {
        width: 40px;
        text-align: center;
        text-align: #333;
        cursor: pointer;
        user-select: none;
        .line {
            width: 30px;
            height: 2px;
            background-color: #ffffff;
            border-radius: 1px;
            margin: 3px auto 0;
            // display: none;
        }
    }
    .tab-active {
        color: #1c87f3;
        .line {
            background-color: #1c87f3;
        }
    }
}
.detailBox {
    padding: 0 30px 10px;
    height: 500px;
    margin-top: 10px;
    overflow: hidden;
    overflow-y: auto;

    .detailItem {
        padding-top: 10px;
        height: 60px;
        border-bottom: 1px solid #f1f1f1;
        .color1 {
            color: #fa5151;
        }
        .color2 {
            color: #67c23a;
        }
        .color3 {
            color: #909399;
        }
    }

    .title {
        margin-left: 120px;
        margin-bottom: 20px;
    }

    &::-webkit-scrollbar {
        width: 4px;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #f1f1f1;
    }

    &::-webkit-scrollbar-track {
        border-radius: 0;
    }
}

.chongzhi-list {
    padding-top: 54px;
    display: flex;
    align-items: center;
    .chongzhi-item {
        margin-right: 28px;
        cursor: pointer;
        width: 214px;
        height: 114px;
        background: #f3f3f3;
        border-radius: 6px;
        border: 1px solid #f3f3f3;
        position: relative;
        padding-top: 17px;
        box-sizing: border-box;
        div {
            text-align: center;
            font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
        }
        .chongzhi-moeny {
            font-size: 32px;
            font-weight: 500;
            color: #fa853c;
        }
        .chongzhi-xzy {
            padding-top: 8px;
            font-size: 20px;
            font-weight: 400;
            color: #666666;
        }
        .jiazeng {
            position: absolute;
            top: -10px;
            left: 0;
            width: 89px;
            height: 28px;
            background: linear-gradient(90deg, #ffb12a 0%, #ff890b 100%);
            border-radius: 10px 0px 10px 0px;
            text-align: center;
            line-height: 28px;
            font-size: 14px;
            font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
            font-weight: 400;
            color: #ffffff;
        }
    }
    .chongzhi-item-active {
        border-color: #ff8315;
        background-color: #fff4eb;
    }
}

.wxPay ::v-deep .el-dialog__body {
    padding: 30px 0 !important;
}
</style>./mybamboo.vue
